<template>
    <ul class="city-alphabet">
        <li @click.prevent="letterClick" @touchstart="letterTouchStart" @touchmove.prevent="letterTouchMove" @touchend="letterTouchEnd" v-for="item of letters" :key="item">
            {{ item }}
        </li>
    </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    letters: Array
  },
  data () {
    return {
      touchStatus: false,
      timer: null
    }
  },
  methods: {
    letterClick (e) {
      this.$emit('letterHandler', e.target.innerText)
    },
    letterTouchStart () {
      this.touchStatus = true
    },
    letterTouchMove (e) {
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const element = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY)
          if (element) {
            let val = element.innerText
            if (val && this.letters.indexOf(val) > -1) {
              this.$emit('letterHandler', val)
            }
          }
        }, 6)
      }
    },
    letterTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style scoped>
.city-alphabet {
    position: absolute;
    top: 1.6rem;
    right: 0;
    bottom: 0;
    color: #00bcd4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: .5rem;
    line-height: .4rem;
}
</style>
